<template>
  <div class="correct">
    <header-nav :leftArrow="true" titelText="消防安全指导意见书"></header-nav>

    <div class="correct-content">
      <div class="tip">根据模板填写，蓝色为必填，其他数据由程序生成</div>
      <div class="model">
        <div class="model-title" :style="openFlag ? 'border-bottom: 1px solid #f0f0f0;' : ''">
          <div>文件模版预览</div>
          <img v-if="openFlag" src="../../assets/images/modelOpen.png" alt="" @click="openFlag = false" />
          <img v-else src="../../assets/images/modelClose.png" alt="" @click="openFlag = true" />
        </div>
        <div class="model-text" v-if="openFlag">
          <!-- <div class="top">(此处印制消防救援机构名称)</div>
          <div class="modelTitle">行政指导建议书</div>
          <div class="modelNumber">
            <span class="blue">__</span>
            <span>消安检字〔</span>
            <span class="blue">__</span>
            <span>〕第</span>
            <span class="blue">__</span>
            <span>号</span>
          </div> -->
          <img src="../../assets/images/wsModel.png" alt="" />
        </div>
      </div>

      <div class="content" :style="openFlag
      ? 'height: calc(100% - 490px);'
      : 'height: calc(100% - 160px);'
      ">
        <div class="content-title">整改建议填写</div>
        <!-- <div class="content-form">
          <div class="textBox">
            <div>
              <span style="color: #ee0a24; margin-right: 2px">*</span>
              <span style="font-size: 16px">1</span>
            </div>
            <van-field v-model="wsForm.checkObjArr[0]" required maxlength="68" placeholder="请输入"
              style="padding: 0 20px" />
          </div>
        </div>
        <div class="line10"></div>
        <div class="content-title">
          <span style="color: #ee0a24; margin-right: 2px">*</span>
          <span class="blue">2</span>
          违法信息
        </div>
        <div class="checkBox">
          <van-radio-group v-model="wsForm.checkObjArr[1]">
            <van-radio :name="0" style="margin-bottom: 12px">违法行为轻微并及时改正，没有造成危害后果</van-radio>
            <van-radio :name="1">有证据足以证明没有主管过错</van-radio>
          </van-radio-group>
        </div>
        <div class="line10"></div>
        <div class="content-form">
          <div class="textBox">
            <div>
              <span style="color: #ee0a24; margin-right: 2px">*</span>
              <span style="font-size: 16px">3</span>
            </div>
            <van-field v-model="wsForm.checkObjArr[2]" required maxlength="68" placeholder="请输入"
              style="padding: 0 20px" />
          </div>
        </div>
        <div class="line10"></div>
        <div class="content-title">
          <span style="color: #ee0a24; margin-right: 2px">*</span>
          <span class="blue">4</span>
          改正信息
        </div> -->
        <!-- <div class="checkBox">
          <van-radio-group v-model="wsForm.checkObjArr[3]">
            <van-radio :name="0" style="margin-bottom: 12px">当场改正完毕</van-radio>
            <van-radio :name="1" style="margin-bottom: 12px">当日改正完毕</van-radio>
            <van-radio :name="2">将危害部位停用</van-radio>
          </van-radio-group>
        </div> -->
        <div class="line10"></div>
        <div class="content-form">
          <div class="textBox">
            <div>
              <span style="color: #ee0a24; margin-right: 2px">*</span>
              <span style="font-size: 16px">1</span>
            </div>
            <van-field v-model="zzjyValue" required type="textarea" placeholder="请输入" style="padding: 0 20px" />
          </div>
        </div>
        <div class="checkBox">
          <van-button block type="primary" @click="submit()"> 保存 </van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { showNotify, showSuccessToast, showFailToast } from 'vant'
const { usePublic } = $globalStore
const router = useRouter()
const route = useRoute()
const id = ref(route.query.id)
const openFlag = ref(true)

const zzjyValue = ref([''])

const wsForm = reactive({
  id: id.value,
  shortName: '',
  charName: '',
  numberName: '',
  type: 11,
  writeMsg: '',
  checkObjArr: [],
})

const submit = async () => {
  if (!zzjyValue.value) {
    return showNotify({ type: 'danger', message: '请输入整改建议' })
  }
  wsForm.checkObjArr.push(zzjyValue.value)
  const res = await usePublic.docProduct(wsForm)
  if (res.code == 0) {
    showSuccessToast('制作成功')
    router.go(-1)
  } else {
    showFailToast(res.message)
  }
}
</script>

<style lang="scss" scoped>
.correct {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: #1764ce;

  .correct-content {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    margin-top: 46px;

    .tip {
      padding: 11px 16px;
      background-color: rgba(254, 241, 230, 1);
      color: #fc770a;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 20px;
    }

    .model {
      margin: 10px 8px;
      background-color: #ffffff;
      border-radius: 8px;

      .model-title {
        padding: 16px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >img {
          width: 20px;
          height: 20px;
        }

        >div {
          font-size: 16px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 24px;
          color: #4d4d4d;
        }
      }

      .model-text {
        max-height: 300px;
        overflow-y: auto;
        padding: 16px 12px 12px 12px;

        >img {
          width: 100%;
        }

        .top {
          text-align: center;
        }

        .modelTitle {
          margin: 8px 0;
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: #000000;
        }

        .modelNumber {
          text-align: right;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: #4d4d4d;
        }

        .modelName {
          text-align: left;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          margin: 8px 0;
        }

        .modelText {
          text-align: left;
          text-indent: 2em;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: #4d4d4d;
          word-wrap: break-word;
          white-space: normal;
        }
      }
    }

    .content {
      overflow-y: auto;
      background-color: #ffffff;
      border-radius: 8px 8px 0 0;

      .content-title {
        padding: 16px;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 24px;
        border-bottom: 1px solid #f0f0f0;
      }

      .content-form {
        .textBox {
          display: flex;
          // align-items: center;
          padding: 16px;
          border-bottom: 1px solid #f5f5f5;

          >div {
            line-height: 24px;
            font-size: 16px;
            color: #1764ce;
          }

          .delBtn {
            color: var(--van-danger-color);
            min-width: 50px;
            text-align: end;
          }
        }

        .addBtn {
          padding: 16px 0;
          text-align: center;
          color: #1764ce;
          border-bottom: 1px solid #f5f5f5;
        }
      }
    }
  }

  .checkBox {
    margin: 0 16px;
    padding: 16px 0;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #f5f5f5;
  }
}

.blue {
  color: #1764ce;
  font-size: 16px;
  // text-decoration: underline;
}

.num {
  font-size: 16px;
  font-weight: 500;
  color: #666666;
}

.num2 {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}

.line10 {
  width: 100%;
  height: 10px;
  background-color: #f7f7f7;
}
</style>
